<template>
    <view class="diy-banner">
        <swiper
            :autoplay="autoplay"
            :class="'banner-box swiper-box dot-' + itemStyle.btnShape"
            :duration="duration"
            :circular="true"
            :indicator-dots="indicatorDots"
            :interval="interval"
            :indicator-color="itemStyle.btnColor"
            indicator-active-color="#000"
            @change="bindChangeFun"
            :style="'height:' + imgHeights[imgCurrent] + 'rpx'"
        >
            <swiper-item v-for="(banner, index) in dataList" :key="index">
                <image
                    mode="widthFix"
                    @tap.stop.prevent="navigationTo"
                    :data-url="banner.linkUrl"
                    class="slide-image"
                    @load="imagesHeightFun"
                    :src="banner.imgUrl"
                    :data-id="index"
                    :data-item-type="banner.linkType"
                ></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>

export default {
    data() {
        return {
            // banner轮播组件属性
            indicatorDots: true,

            // 是否显示面板指示点
            autoplay: true,

            // 是否自动切换
            interval: 2800,

            // 自动切换时间间隔
            duration: 800,

            // 滑动动画时长

            imgHeights: [],

            // 图片的高度
            // 当前banne所在滑块指针
            imgCurrent: 0,

            banner: {
                linkUrl: '',
                imgUrl: ''
            }
        };
    },
    options: {},
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        dataList: Array
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 计算图片高度
         */
        imagesHeightFun: function (e) {
            // 获取图片真实宽度
            let imgwidth = e.detail.width;
            let imgheight = e.detail.height;
            let // 宽高比
                ratio = imgwidth / imgheight; // 计算的高度值
            let viewHeight = 750 / ratio;
            let imgHeights = this.imgHeights; // 把每一张图片的高度记录到数组里
            imgHeights.push(viewHeight);
            this.setData({
                imgHeights
            });
        },
        /**
         * 记录当前指针
         */
        bindChangeFun: function (e) {
            this.setData({
                imgCurrent: e.detail.current
            });
        },
        /**
         * 跳转到指定页面
         */
        navigationTo: function (e) {
            console.log(e)
          let url = e.currentTarget.dataset.url || ''
          if (!url){
            return
          }
           this.gotoPath(e.currentTarget.dataset.url, true,e.currentTarget.dataset.linkType||'1')
        }
    },
    created: function () {}
};
</script>
<style>
@import './c_banner.css';
</style>
